<template>
  <div v-el:focusable-el class="photo-frame" :style="{ width: photoFrameWidth + 'px', height: photoFrameHeight + 'px'}">
    <img class="photo-pic" :src="photoFrameSrc" :style="{ width: photoFrameWidth + 'px', height: photoFrameHeight + 'px'}"/>
    <div class="photo-frame-bottom-bar" :style="{ width: photoFrameBottomBarWidth + 'px'}">
      <avatar :avatar-size="32" :avatar-src="photoFrameAvatar"></avatar>
    </div>
  </div>
</template>

<script type="text/babel">
  import $ from 'jquery'
  import Avatar from './Avatar'
  import FocusableView from './FocusableView'
  import TWEEN from 'tween.js'
  import '../../../static/js/RequestAnimationFrame.js'
  import Utils from '../../libs/Utils'
  import KeyEventComponentMixin from '../KeyEventComponentMixin'

  var animate = function (time) {
    window.requestAnimationFrame(animate)
    TWEEN.update(time)
  }
  animate()

  export default {
    mixins: [ KeyEventComponentMixin, FocusableView ],
    props: {
      photoFrameWidth: {
        type: Number,
        required: true
      },
      photoFrameHeight: {
        type: Number,
        required: true
      },
      photoFrameSrc: {
        type: String
      },
      photoFrameAvatar: {
        type: String
      }
    },
    computed: {
      photoFrameBottomBarWidth () {
        return this.photoFrameWidth - 4 * 2
      }
    },
    components: {
      Avatar
    },
    methods: {
      onFocusView: function (element, done) {
        var self = this
        var src = {
          scale: 1.0
        }
        var dest = {
          scale: 1.2
        }
        var offset = $(element).offset()
        var width = self.photoFrameWidth
        var height = self.photoFrameHeight
        var t = new TWEEN.Tween(src)
        t.to(dest, 200)
        .onStart(function () {
          self.animating = {
            animation: t,
            scale: 1
          }
        })
        .onUpdate(function () {
          var currScale = this.scale
          self.animating.scale = currScale
          var scaledWidth = parseInt(width * currScale)
          var scaledHeight = parseInt(height * currScale)
          $(element).css({
            width: scaledWidth + 'px',
            height: scaledHeight + 'px',
            top: parseInt(offset.top - (height * (currScale - 1)) / 2) + 'px',
            left: parseInt(offset.left - (width * (currScale - 1)) / 2) + 'px'
          })
          $(element).children('.photo-pic').css({
            width: scaledWidth + 'px',
            height: scaledHeight + 'px'
          })
          $(element).children('.photo-frame-bottom-bar').css({
            width: scaledWidth - 4 * 2
          })
        })
        .onComplete(function () {
          self.animating = false
          if (Utils.isFunction(done)) {
            done.call(self)
          }
        })
        t.start()
      },
      onBlurView: function (element, done) {
        var self = this
        var src = {
          scale: 1.2
        }
        if (self.animating) {
          self.animating.animation.stop()
          src.scale = self.animating.scale
        }
        var t = new TWEEN.Tween(src)
        var width = self.photoFrameWidth
        var height = self.photoFrameHeight
        var offset = $(self.focusableElement()).offset()
        t.to({ scale: 1 }, 200)
        .onStart(function () {
          self.animating = {
            animation: t,
            scale: 1.2
          }
        })
        .onUpdate(function () {
          var currScale = this.scale
          self.animating.scale = currScale
          var scaledWidth = parseInt(width * currScale)
          var scaledHeight = parseInt(height * currScale)
          $(element).css({
            width: scaledWidth + 'px',
            height: scaledHeight + 'px',
            top: parseInt(offset.top - (height * (currScale - 1)) / 2) + 'px',
            left: parseInt(offset.left - (width * (currScale - 1)) / 2) + 'px'
          })
          $(element).children('.photo-pic').css({
            width: scaledWidth + 'px',
            height: scaledHeight + 'px'
          })
          $(element).children('.photo-frame-bottom-bar').css({
            width: scaledWidth - 4 * 2
          })
        })
        .onComplete(function () {
          self.animating = false
          if (Utils.isFunction(done)) {
            done.call(self)
          }
        })
        t.start()
      },
      createMaskElement: function () {
        return $(this.$el.outerHTML).get(0)
      }
    }
  }
</script>

<style>
  .photo-frame {
    position: relative;
    top: 0;
    left: 0;
    border-radius: 8px;
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, .4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .4);
    display: inline-block;
  }

  .photo-frame .photo-pic {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    border: 4px solid white;
  }

  .photo-frame .photo-frame-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    padding-top: 9px;
    padding-left: 10px;
    background: rgba(0, 0, 0, .5);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
  }
</style>